<template>
    <div class="movie">
        <section>
            <div :class="['page-wrap','cinema',{'stop':loading}]">
                <div class="tab-block">
                    <div class="tab-content">
                        <div class="page">
                            <div class="nav-wrap filter-nav-wrap">
                                <div class="tab" ref="tab">
                                    <div :class="['item', {'chosenTitle':type==1}]" @click="select(1)">
                                        <i>全城</i>
                                        <span class="drop"></span>
                                    </div>
                                    <div :class="['item', {'chosenTitle':type==2}]" @click="select(2)">
                                        <i>品牌</i>
                                        <span class="drop"></span>
                                    </div>
                                    <div :class="['item', {'chosenTitle':type==3}]" @click="select(3)">
                                        <i>特色</i><i ref="little"></i>
                                        <span class="drop"></span>
                                    </div>
                                </div>
                                <div class="close-tab">
                                    <div class="tab-content">
                                        <div class="page region" v-if="type==1">
                                            <div class="region-tab">
                                                <ul class="tablist">
                                                    <li :class="['item', {'chosen':showTab==index}]" @click="showTab=index" v-for="(item,index) in alltype" :key="index">{{item}}</li>
                                                </ul>
                                            </div>
                                            <div class="region-list">
                                                <div class="region-sidenav">
                                                    <div class="district" v-if="showTab==0">
                                                        <div :class="['district-li','item', {'chosen':showTab1==index}]" @click="selectRegion(item.id)" v-for="(item,index) in district" :key="index">{{item.name}}({{item.count}})</div>
                                                    </div>
                                                    <div class="subway"  v-if="showTab==1">
                                                        <div :class="['district-li','item', {'chosen':showTab6==index}]" @click="selectline(item.id)" v-for="(item,index) in subway" :key="index">{{item.name}}({{item.count}})</div>
                                                    </div>
                                                </div>
                                                <div class="region-list-item">
                                                    <div class="filter-list"  v-if="showTab==0">
                                                        <div :class="['item' ,{'chosen':showTab2==index}]" v-for="(item,index) in districtItem" :key="index" @click="checkItem(item.id,index,item.name)">
                                                            <span class="item-name">{{item.name}}</span>
                                                            <span class="item-count">{{item.count}}</span>
                                                        </div>
                                                    </div>
                                                    <div class="filter-list" v-if="showTab==1">
                                                        <div :class="['item' ,{'chosen':showTab2==index}]" v-for="(item,index) in subwayItem" :key="index" @click="checklineItem(item.id,index,item.name)">
                                                            <span class="item-name">{{item.name}}</span>
                                                            <span class="item-count">{{item.count}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="page brand" v-if="type==2">
                                            <div class="brand-content">
                                                <div :class="['item', 'brand-list', {'chosen':showTab3==index}]" @click="checkBrand(item.id,index,item.name)" v-for="(item,index) in brand" :key="index">
                                                    <div class="brand-name">{{item.name}}</div>
                                                    <div class="brand-count">{{item.count}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="page special" v-if="type==3">
                                            <div id="special-content">
                                                <div class="item-title">特色功能</div>
                                                <div class="item-list">
                                                    <div :class="['item', {'chosen':showTab4==index}]" @click="checkService(item.id,index,item.name)" v-for="(item,index) in service" :key="index">{{item.name}}</div>
                                                </div>
                                                <div class="item-title">特殊厅</div>
                                                 <div class="item-list">
                                                    <div :class="['item', {'chosen':showTab5==index}]" @click="checkhallType(item.id,index,item.name)" v-for="(item,index) in hallType" :key="index">{{item.name}}</div>
                                                </div>
                                            </div>
                                            <div id="special-btn">
                                                <span class="btn" id="cancel-btn" @click="reset">重置</span>
                                                <span class="btn" id="confirm-btn" @click="type=null">确定</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="blacker" v-if="type" @click="type=null"></div>
                            <div class="cinema-list" v-if="!nothing">                           
                            <!-- <van-loading size="24px" v-if="showloading">正在加载...</van-loading> -->
                                <div class="lodaing" v-if="showloading">
                                    <div class="img">
                                      <img class="img1" src="../assets/images/maoyan01.png" alt="" />
                                      <img class="img2" src="../assets/images/maoyan02.png" alt="" />
                                    </div>
                                    </div>
                                <div class="list-wrap" v-if="!showloading">
                                    <van-list
                                        v-model="loading"                                       
                                        :finished="finished"           
                                        @load="onLoad"
                                        
                                    >
                                    <div class="item" v-for="(item,index) in cinemalist" :key="index" @click="godetail(item.cinemaId)">
                                        <div class="title-block">
                                            <div class="title line-ellipsis">
                                                <span>{{item.title}}</span>
                                                <span class="price-block">
                                                    <div class="price">{{item.price.n}}</div>
                                                    <span class="q">{{item.price.q}}</span>
                                                </span>
                                            </div>
                                            <div class="location-block box-flex">
                                                <div class="flex line-ellipsis">{{item.location}}</div>
                                            </div>
                                            <div class="label-block" v-if="item.services.length!=0">
                                                <div :class="k.code" v-for="(k,i) in item.services" :key="i">{{k.text}}</div>
                                            </div>
                                            <div class="discount-block" v-if="item.discount.length!=0">
                                                <div>
                                                    <div class="discount-label normal card">
                                                        <img src="../assets/images/card.png" alt="">
                                                    </div>
                                                    <div class="discount-label-text" v-for="(s,l) in item.discount" :key="l">{{s.text}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </van-list>
                                </div>
                            </div>
                            <div class="nothing" v-if="nothing"><img src="../assets/images/nothing.png" alt=""></div> 
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import {getMoreCinemas,getCinemasType} from '../api/cinema.js'
    export default {
        data() {
            return {
                cinemalist:null,//影院列表
                showTab:0,
                showTab1:0,//区域
                showTab2:0,//区域item
                showTab3:0,//品牌
                showTab4:0,//服务
                showTab5:0,//影厅类型
                showTab6:0,//地铁
                loading: false,//加载动画
                finished: false,
                showloading:true,
                nothing:false,
                type:null,
                alltype:['商区','地铁站'],
                date:null,//时间
                limitnum:10,//限制列表加载长度
                offset:10,//分页偏移
                cityId:null,//城市id

                district:null,//商区
                areaId:-1,//商圈
                districtId:-1,//行政区ID
                districtItem:null,//商区item

                subway:null,//地铁
                subwayItem:null,
                lineId:-1,
                stationId:-1,


                brand:null,//品牌
                brandIds:-1,//品牌id

                service:null,//服务
                serviceId:-1,

                hallType:null,//影厅类型
                hallTypeId:-1,


            }
        },
        methods: {
            //获取影院列表
            // districtId：地区  areaId：商圈  lineId：地铁 stationId：路线   brandIds：品牌   serviceIds：服务 offset: 分页偏移 
            getCinemasFun(){
                this.cinemalist=null,
                this.offset=0
                // this.loading=true
                getMoreCinemas({
                    day:this.date,
                    cityId:this.cityId,
                    offset:this.offset,
                    limit:this.limitnum,
                    districtId:this.districtId,
                    areaId:this.areaId,
                    brandId:this.brandIds,
                    hallType:this.hallTypeId,
                    serviceId:this.serviceId,
                    lineId:this.lineId,
                    stationId:this.stationId,
                    }).then(data=>{

                    // console.log(data);
                    if (data.length==0 || data.length<10) {
                        this.finished=true
                    }
                    if (data.length>=10) {
                        this.finished=false
                    }
                    if (data.length==0) {
                        this.loading=true
                        setTimeout(() => {
                            this.nothing=true
                        }, 800);
                    }else{
                        this.nothing=false
                    }
                    this.cinemalist=data
                    this.offset=10
                    setTimeout(()=>{
                        this.loading=false
                        this.showloading=false
                    },800)
                })
            },
            //加载数据
            getCinemaList(){
                this.loading=true
                getMoreCinemas({
                    day:this.date,
                    offset:this.offset,
                    limit:this.limitnum,
                    cityId:this.cityId,
                    districtId:this.districtId,
                    areaId:this.areaId,
                    brandId:this.brandIds,
                    hallType:this.hallTypeId,
                    serviceId:this.serviceId,
                    lineId:this.lineId,
                    stationId:this.stationId,
                }).then(data=>{
                    // console.log(data);
                    this.cinemalist=[...this.cinemalist,...data]
                    // console.log("增加到了",this.cinemalist.length);
                    setTimeout(()=>{
                        this.loading=false
                    },500)
                })
                this.offset +=10
                if (this.offset >= 60) {
                    this.finished = true;
                }

            },
            //获取影院类型数据
            getCinemaTypeFun(){
                getCinemasType({ci:this.cityId}).then(data=>{
                    // console.log(data);
                    this.district=data.district.subItems
                    this.subway=data.subway.subItems
                    this.brand=data.brand.subItems
                    this.service = data.service.subItems
                    this.hallType = data.hallType.subItems
                })
            },
            //加载更多数据
            onLoad(){
                // console.log("触底");
                this.getCinemaList()

            },
            select(value){
                this.type=this.type==value?null:value
            },
             // 获取年月日
            getDateFun(){
                let time = new Date()
                let y = time.getFullYear()
                let m = time.getMonth()+1
                let d = time.getDate()
                this.date = `${y}-${m}-${d}`
            },
            //商区
            selectRegion(id){
                let index = this.district.findIndex(item=>item.id==id)
                this.showTab1=index
                this.showTab2=0
                this.districtItem=this.district[index].subItems

                //获取行政区id
                this.districtId=id
                if (id==-1) {
                    this.areaId=id
                    this.showTab2=0
                    this.type=null
                    
                    this.getCinemasFun() 
                    this.$refs.tab.getElementsByTagName("i")[0].innerText='全城'
                }
            },
            //地铁
            selectline(id){
                let index = this.subway.findIndex(item=>item.id==id)
                this.showTab6=index
                this.showTab2=0
                this.lineId=id
                this.subwayItem = this.subway[index].subItems
                if (id==-1) {
                    this.areaId=id
                    this.showTab2=0
                    this.type=null
                    
                    this.getCinemasFun() 
                    this.$refs.tab.getElementsByTagName("i")[0].innerText='全城'
                }
            },
            checkItem(id,i,name){
                this.showTab2=i
                //获取区域id
                this.areaId=id
                this.lineId=-1
                this.stationId=-1
                if (id==-1) {
                    
                    this.getCinemasFun()  
                    this.$refs.tab.getElementsByTagName("i")[0].innerText=this.district[this.showTab1].name
                }else{
                    this.$refs.tab.getElementsByTagName("i")[0].innerText=name
                }
                this.type=null
            },
            checklineItem(id,i,name){
                this.showTab2=i
                //获取区域id
                this.areaId=-1
                this.districtId=-1          
                this.stationId=id
                if (id==-1) {
                    
                    this.getCinemasFun()  
                    this.$refs.tab.getElementsByTagName("i")[0].innerText=this.district[this.showTab1].name
                }else{
                    this.$refs.tab.getElementsByTagName("i")[0].innerText=name
                }
                this.type=null
            },
            //品牌
            checkBrand(id,index,name){
                this.showTab3=index
                this.brandIds=id
                this.$refs.tab.getElementsByTagName("i")[1].innerText=name
                this.type=null
                
                this.getCinemasFun()
            },
            //服务
            checkService(id,index,name){
                this.showTab4=index
                this.serviceId=id
                if (id==-1) {
                    this.$refs.tab.getElementsByTagName("i")[2].innerText='特色'
                }else{
                    this.$refs.tab.getElementsByTagName("i")[2].innerText=`${name},`
                }
                
                this.getCinemasFun()
                
            },
            //影厅类型
            checkhallType(id,index,name){
                this.showTab5=index
                this.hallTypeId=id
                if (id==-1) {
                    this.$refs.tab.getElementsByTagName("i")[2].innerText='特色'
                }else{
                    this.$refs.little.innerText=name
                }
                
                this.getCinemasFun()
            },
            //重置
            reset(){
                this.serviceId=-1;
                this.hallTypeId=-1;
                this.type=null
                
                this.getCinemasFun()
            },
            godetail(id){
                this.$router.push({path:'/cinema',query:{id,ci:this.cityId}})
            }

        },
        created() {
            //初始化城市id
            this.cityId=this.$route.query.id==null?20:this.$route.query.id
            this.getCinemasFun()
            this.getDateFun()
            this.getCinemaTypeFun()
        },
        watch:{
            'areaId':function () {
                this.getCinemasFun()
            },
            'stationId':function () {                
                this.getCinemasFun()
            },
        }
    }
</script>

<style lang="less" scoped>
.movie{
    overflow: hidden;
    flex: 1;
    position: relative;

    .page-wrap{
        display: block;
        height: 100%;
        width: 100%;
        overflow-y: scroll;
        position: absolute;

        .tab-block{
            .tab-content{
                .page{
                    width: 100%;
                    flex: auto;

                    .nav-wrap{
                        position: fixed;
                        top: 95px;
                        width: 100%;
                        height: 40px;
                        z-index: 10;
                        background-color: #fff;
                        z-index: 110;

                        .tab{
                            display: flex;
                            margin: 0 auto;
                            padding: 0;
                            width: 90%;
                            text-align: center;
                            background-image: url("../assets/images/repeat-x-bottom-outline.png");
                            background-position: 0 bottom;
                            background-repeat: repeat-x;
                            background-size: 1px 1px;

                            .item{
                                flex: 1;
                                text-align: center;
                                line-height: 40px;
                                position: relative;
                                white-space: nowrap;
                                overflow: hidden;
                                font-size: 13px;
                                text-overflow: ellipsis;

                                .drop{
                                    display: inline-block;
                                    position: absolute;
                                    top: 18px;
                                    width: 0;
                                    height: 0;
                                    margin-left: 4px;
                                    border: 4px solid transparent;
                                    border-top-color: #b0b0b0;
                                }
                            }
                            .chosenTitle{
                                color: #e54847;
                                .drop{
                                    border-bottom-color: #f03d37;
                                    border-top-color: transparent;
                                    top: 14px;
                                }
                            }
                        }
                        .close-tab{
                            position: relative;
                            width: 100%;
                            background: #fff;
                            z-index: 100;
                            overflow: scroll;

                            .tab-content{

                                .page{
                                    background-color: #fff;
                                    overflow: auto;
                                    z-index: 999;

                                    .region-tab{
                                        height: 44px;

                                        .tablist{
                                            display: flex;
                                            width: 90%;

                                            .item{
                                                position: relative;
                                                display: inline-block;
                                                padding: 0 10px;
                                                width: 50%;
                                                height: 100%;
                                                line-height: 44px;
                                                text-align: center;
                                            }
                                            .chosen{
                                                color: #f03d37;

                                                &::after{
                                                    content: "";
                                                    position: absolute;
                                                    display: block;
                                                    bottom: 0;
                                                    left: 0;
                                                    width: 90%;
                                                    border-top: 2px solid #f03d37;
                                                }
                                            }
                                        }
                                    }
                                    .region-list{
                                        background: #f5f5f5;
                                        height: 400px;

                                        .region-sidenav{
                                            width: 35%;
                                            height: 100%;
                                            float: left;
                                            overflow: scroll;

                                            .subway,
                                            .district{
                                                min-height: 100%;
                                                background: #fff;

                                                .district-li{
                                                    height: 44px;
                                                    padding-left: 10px;
                                                    line-height: 44px;
                                                    font-size: 14px;
                                                    text-overflow: ellipsis;
                                                    white-space: nowrap;
                                                    overflow: hidden;
                                                }
                                                .chosen{
                                                    color: #f03d37;
                                                    background-color: #f5f5f5;
                                                }
                                            }
                                            &::-webkit-scrollbar {
                                                    display: none;
                                            }
                                        }
                                        .region-list-item{
                                            width: 65%;
                                            height: 100%;
                                            float: right;
                                            overflow: scroll;

                                            .filter-list{
                                                background-color: #f5f5f5;

                                                .item {
                                                    position: relative;
                                                    height: 45px;
                                                    line-height: 45px;
                                                    padding: 0 0 0 25px;

                                                    .item-name{
                                                        display: inline-block;
                                                        width: 80%;
                                                        font-size: 14px;
                                                        color: #333;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;
                                                        overflow: hidden;
                                                    }
                                                    .item-count{
                                                        float: right;
                                                        width: 20px;
                                                        margin-right: 10px;
                                                        color: #8f9296;
                                                        font-size: 12px;
                                                        text-align: right;
                                                    }
                                                }
                                                .chosen{
                                                    color: #f03d37;

                                                    .item-name{
                                                        color: #f03d37;
                                                    }
                                                    .item-count{
                                                        color: #f03d37;
                                                    }
                                                    ::before{
                                                        content: '';
                                                        display: block;
                                                        position: absolute;
                                                        left: 8px;
                                                        top: 19px;
                                                        width: 11.5px;
                                                        height: 8px;
                                                        background-image: url("../assets/images/chosen.png");
                                                        background-repeat: no-repeat;
                                                        background-size: 100% 100%;
                                                    }
                                                }
                                            }
                                            &::-webkit-scrollbar {
                                                display: none;
                                            }
                                        }

                                    }
                                }
                            }
                        }
                    }
                    .brand{
                        min-height: 150px;
                        max-height: 352px;

                        .brand-content{

                            .brand-list{
                                position: relative;
                                line-height: 44px;
                                height: 44px;
                                padding: 0 15px 0 26px;
                                border-bottom: 1px solid #e5e5e5;
                                color: #333;

                                .brand-name{
                                    display: inline-block;
                                    width: 49%;
                                }
                                .brand-count{
                                    display: inline-block;
                                    width: 49%;
                                    text-align: right;
                                    color: #8f9296;
                                    font-size: 12px;
                                }
                            }
                            .chosen{
                                color: #f03d37;
                                 .brand-name{
                                    color: #f03d37;
                                 }
                                 .brand-count{
                                    color: #f03d37;
                                 }
                                ::after{
                                    content: '';
                                    display: block;
                                    position: absolute;
                                    left: 8px;
                                    top: 19px;
                                    width: 11.5px;
                                    height: 8px;
                                    background-image: url("../assets/images/chosen.png");
                                    background-repeat: no-repeat;
                                    background-size: 100% 100%;

                                }
                            }
                        }
                        &::-webkit-scrollbar {
                            display: none;
                        }
                    }
                    .special{
                        min-height: 208px;
                        overflow: hidden;

                        #special-content{
                            min-height: 150px;
                            max-height: 270px;
                            overflow: scroll;

                            .item-title{
                                margin-left: 12px;
                                margin-top: 11px;
                                font-size: 15px;
                            }
                            .item-list{
                                margin: 0 12px 12px 12px;

                                .item{
                                    float: left;
                                    width: 21.3%;
                                    height: 30px;
                                    padding: 3px 0;
                                    margin-right: 3%;
                                    margin-top: 10px;
                                    line-height: 30px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    text-align: center;
                                    border: 1px solid #ccc;
                                    border-radius: 5px;
                                    font-size: 9.8px;
                                }
                                .chosen{
                                    background: #fcf0f0;
                                    color: #f03d37;
                                    border: 1px solid #f03d37;
                                }
                                &::after{
                                    display: block;
                                    clear: both;
                                    content: "";
                                }
                            }
                             &::-webkit-scrollbar {
                                display: none;
                            }
                        }
                        #special-btn{
                            height: 60px;
                            width: 100%;
                            border-top: 1px solid #e5e5e5;
                            margin-top: 10px;
                            background: #fafafa;
                            .btn{
                                display: inline-block;
                                height: 34px;
                                width: 21.3%;
                                margin: 13px 11px;
                                border: 1px solid #e5e5e5;
                                border-radius: 6px;
                                text-align: center;
                                line-height: 34px;
                                font-size: 14px;
                            }
                            #confirm-btn{
                                float: right;
                                background: #f03d37;
                                border: 1px solid #f03d37;
                                color: #fff;
                            }
                        }
                    }
                    .blacker{
                        position: fixed;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 100%;
                        background: rgba(0,0,0,.3);
                        z-index: 109;
                    }
                    .cinema-list{
                        margin-top: 40px;

                        .item{
                            padding: 13px 15px 13px 0;
                            margin-left: 15px;
                            background-color: #fff;
                            position: relative;
                            overflow: hidden;

                            .title-block{
                                display: block;
                                line-height: 1.5;

                                .title{
                                    height: 23px;
                                    line-height: 23px;
                                    font-size: 16px;
                                    color: #000;

                                    .price-block{   
                                        padding-left: 3px;
                                        padding-top: 9px;
                                        line-height: 1.5;

                                        .price{
                                            display: inline-block;
                                            font-size: 18px;
                                            color: #f03d37;
                                        }
                                        .q{
                                            font-size: 12px;
                                            margin-left: 3px;
                                            color: #f03d37;
                                        }
                                    }
                                }
                                .location-block{
                                    margin-top: 6px;
                                    font-size: 13px;
                                    color: #666;
                                    line-height: 1.5;

                                    .flex{
                                        display: block;
                                        flex: 1;
                                    }
                                }
                                .label-block{
                                    height: 17px;
                                    line-height: 17px;
                                    margin-top: 4px;
                                    margin-bottom: 4px;
                                    overflow: hidden;
                                    font-size: 0;
                                    flex-shrink: 0;

                                    &>div{
                                        position: relative;
                                        display: inline-block;
                                        padding: 0 3px;
                                        height: 15px;
                                        line-height: 15px;
                                        border-radius: 2px;
                                        font-size: 12px;
                                        margin-left: 5px;
                                    }
                                    &>div:first-child{
                                        margin-left: 0;
                                    }
                                }
                                .discount-block{
                                    color: #999;
                                    margin-bottom: 4px;

                                    .discount-label{
                                        display: inline-flex;
                                        width: 15px;
                                        height: 14px;
                                        position: relative;
                                        top: 3px;

                                        &>img{
                                            width: 100%;
                                        }
                                    }
                                    .discount-label-text{
                                        display: inline-block;
                                        margin-left: 2px;
                                        font-size: 12px;
                                    }
                                }
                            }
                        }
                        
                    }
                }
            }
        }
        &::-webkit-scrollbar {
             display: none;
        }

    }
    .stop{
        overflow: hidden;
    }
    ::v-deep .van-loading{
        text-align: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        // padding-top: 10px;
        position: fixed;
        // top:137px;
        left: 0;
        right: 0;
        bottom: 50px;
        z-index: 10;
        background-color: #f4f4f4;
    }

}
@keyframes animation1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lodaing {
  width: 100%;
  height: 85vh;
  position: fixed;
  bottom: 50px;
  left: 0;
  background-color: #fff;
  z-index: 99;

  .img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 45px;
    height: 45px;

    img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    .img2 {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      animation: animation1 1s linear 0s infinite;
    }
  }
}
.nothing{
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;

    &>img{
        width: 150px;
        height: 150px;
    }

}
// ::v-deep .van-loading{
//   height: 45px;
//   line-height: 45px;
//   position: fixed;
//   left: 0;
//   right: 0;
//   bottom: 45px;
//   background-color: #f5f5f5;
// }
</style>